<template>
	<view>
		<u-navbar title="订单详情" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#1D1D20" class="navBarHeight" />
		<view class="padding-lr pr">
			<view class="b-r-10 bg-white p-30 flex justify-between m-b-20 m-t-20">
				<u-icon name="map" color="#ECA52B" size="28" ></u-icon>
				<view class="w-90 m-l-10">
					<view class="font-b font-30">
						<text>收货地址:</text>
						<text class="m-l-10">{{orderDetail.receiveProvince}}{{orderDetail.receiveCity}}{{orderDetail.receiveArea}}{{orderDetail.receiveAddress}}</text>
					</view>
					<view class="m-t-5 font-26 color-g">
						<text>收货人:</text>
						<text class="m-l-10">{{orderDetail.receiveName}}</text>
						<text class="m-l-10">{{orderDetail.receiveMobile}}</text>
					</view>
				</view>
			</view>
			<view class="bg-white radius-8 padding margin-bottom-sm font-28 position-r">
				<view class="text-white status position-a bg-yellow" v-for="(cItem, cIndex) in orderStatusList" :key="cIndex+'a'" v-if="orderDetail.orderStatus == cItem.value">
					<view class="font-24 color-w p-l-10 p-r-10 p-t-4 p-b-4">{{cItem.label}}</view>
				</view>
				<view class="w-100 m-b-10" v-for="(itemx,indexx) in orderDetail.details" :key="indexx+'b'">
					<div class="flex w-100">
						<view class="goods-img">
							<image :src="itemx.productImg" class="goods-img"></image>
						</view>
						<view class="m-l-10">
							<view class="text-bold text-cut2 font-30 boxName">{{itemx.productName}}</view>
							<view class="m-t-5"> 价格：<text class="text-theme">￥{{itemx.productPrice}}</text> </view>
							<view class="m-t-5"> 数量：{{ itemx.buyCount }} </view>
						</view>
						<view class="flex-1 flex flex-end flex-col-end" v-if="itemx.isServiceed == 0">	
							<view class="applyBtn" @click.stop="toApply(itemx)">申请售后</view>
						</view>
						<view class="flex-1 flex flex-end flex-col-end" v-if="itemx.isServiceed == 1">	
							<view class="applyBtn" @click.stop="toApply(itemx)">申请中</view>
						</view>
						<view class="flex-1 flex flex-end flex-col-end" v-if="itemx.isServiceed == 2">	
							<view class="applyBtn greenBox">已退款</view>
						</view>
						<view class="flex-1 flex flex-end flex-col-end" v-if="itemx.isServiceed == 3">	
							<view class="applyBtn redBox">审核拒绝</view>
						</view>
					</div>
					<div class="p-t-5 p-b-5 m-t-10 font-24 color-r" v-if="itemx.isServiceed == 3 && itemx.refund && itemx.refund.remark">审核拒绝原因:{{ itemx.refund.remark }}</div>
				</view>
				<view class="line"></view>
				<view class="flex justify-between font-28 margin-tb">
					<view class="text-black9">订单号码</view>
					<view class="flex align-center">
						<view>{{orderDetail.orderId}}</view>
						<view>
							<image src="/static/product/copy.png" class="copy-icon" @click="copy"></image>
						</view>
					</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom">
					<view class="text-black9">支付方式</view>
					<view class="flex flex-wrap word-break text-right">{{orderDetail.payMethodName}}</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom" v-if="orderDetail.couponId">
					<view class="text-black9">优惠券抵扣金额</view>
					<view class="flex flex-wrap word-break text-right color-r">￥{{ orderDetail.couponAmount }}</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom">
					<view class="text-black9">实际支付金额</view>
					<view class="flex flex-wrap word-break text-right color-r">￥{{ orderDetail.payAmount }}</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom">
					<view class="text-black9">支付时间</view>
					<view>{{orderDetail.payTime}}</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom">
					<view class="text-black9">发货方式</view>
					<view v-if="orderDetail.deliverType == 1">物流</view>
					<view v-if="orderDetail.deliverType == 2">自提</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom" v-if="orderDetail.deliverType == 1">
					<view class="text-black9">物流公司</view>
					<view>{{orderDetail.deliverName}}</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom" v-if="orderDetail.deliverType == 1">
					<view class="text-black9">物流单号</view>
					<view>{{orderDetail.deliverNo}}<text class="copy-btn" @click="copyCode(orderDetail.deliverNo)">复制</text></view>
				</view>
				<view class="flex justify-between font-28 margin-bottom">
					<view class="text-black9">发货时间</view>
					<view>{{orderDetail.deliverTime}}</view>
				</view>
				<view class="flex justify-between font-28 margin-bottom">
					<view class="text-black9">订单完成</view>
					<view>{{orderDetail.finishTime}}</view>
				</view>
			</view>
		</view>
		<view class="footer-h"></view>
		<view class="flex footer justify-end" v-if="orderDetail.orderStatus != 5 && orderDetail.orderStatus != 2">
			<view class="padding-tb" v-if="orderDetail.orderStatus == 1" >
				<view class="btn" @click="handleCancel">取消订单</view>
			</view>
			<view class="padding-tb" v-if="orderDetail.orderStatus == 1">
				<view class="btn" @click="toPay">去支付</view>
			</view>
			<view class="padding-tb" v-if="orderDetail.orderStatus == 3">
				<view class="btn" @click="handleReceive">确认收货</view>
			</view>
		</view>
		<u-modal :show="showReceive" title="确认收货" :content="orderDetail.productName" confirmColor="#ECA52B" :showCancelButton="true" @cancel="showReceive = false" @confirm="confirmReceive"></u-modal>
		<u-modal :show="showCancelModal" title="确认取消订单" :showCancelButton="true" :content='orderDetail.productName' confirmColor="#ECA52B" @cancel="closeCancel" @confirm="confirmCancel"></u-modal>
		<!-- 申请售后 -->
		<u-popup mode="center" :show="openApplyOrder" bgColor="transparent" :cancelShow="false" :closeable="true" @close="openApplyOrder = false">
			<view class="upgrade-box bg-white w-10">
				<view class="content-box position-r">
					<view class="w-100 text-center font-40 font-b color-b m-b-40">申请售后</view>
					<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm" labelWidth="80">
						<u-form-item label="售后类型" prop="type" borderBottom @click="showType = true" :borderBottom="false">
							<u--input
								style="pointer-events:none"
								v-model="form.type"
								disabled
								disabledColor="#ffffff"
								placeholder="请选择售后类型"
								border="none"
							></u--input>
							<u-icon slot="right" name="arrow-right" ></u-icon>
						</u-form-item>
						<u-form-item label="售后原因" prop="comment" borderBottom :borderBottom="false">
							<u--textarea class="m-t-20" v-model="form.comment" placeholder="请输入售后原因" ></u--textarea>
						</u-form-item>
					</u--form>
					<u-picker :show="showType" :columns="columns" keyName="label" @cancel="showType = false" @confirm="confirmPick"></u-picker>
					<div class="m-t-50 IKown flex flex-row-center w-100 ">
						<view class="btnBoxx font-28 bg-yellow line-h-50" @tap="tipsClick">提交申请</view>
					</div>
				</view>
			</view>
		</u-popup>
		<!-- 确认收货提示  -->
		<u-popup :show="comfirmReceiveBool" @close="comfirmReceiveBool = false" round="10" mode="center">
			<view style="width:600rpx" class="p-l-30 p-r-30">
			  <view class="w-100 bg-white b-r-10 p-20 border-box">
				<view class="w-100 text-center line-h-80 font-18 font-b m-t-10 p-r-20 border-box">温馨提示</view>
				<view class="w-100 line-h-50 font-28 m-t-10 p-r-20 border-box">请确认是否立即领取积分奖励，领取积分后非产品质量问题不能申请退货退款。</view>
				<view class="w-100 line-h-50 font-28 m-t-30 p-r-20 border-box">
					  <checkbox value="cb" :checked="agree" @click="change" />
					  <text @click="change">我已知晓并同意</text>
					  <text class="boxsUser" @click="receiveWarningBool = true">"赠送积分"商品用户须知</text>
				</view>
				<view class="boxsContent flex justify-between">
				  <view class="flex-1 bg-red1 color-w font-28 b-r-10 font-b line-h-60 text-center" @click="sevenDaySubmit">七天后到账</view>
				  <view class="flex-1 bg-red1 color-w font-28 b-r-10 font-b line-h-60 text-center m-l-30" @click="submitNow">立即领取</view>
				</view>
			  </view>
			</view>
		</u-popup>
		<!-- 赠送积分用户须知  -->  
		<u-popup :show="receiveWarningBool" @close="receiveWarningBool = false" round="10" mode="center">
			<view style="width:600rpx" class="p-l-30 p-r-30">
				<view class="w-100 bg-white b-r-10 p-20 border-box">
				<view class="w-100 text-center line-h-80 font-18 font-b m-t-10 border-box">"赠送积分"商品用户须知</view>
				<view class="w-100 line-h-50 font-28 m-t-10 border-box">
					尊敬的消费者，因您即将购买属于“赠送积分“的系列商品，
					为保障您的权益，请您仔细阅该以下平台消费规则:<br/>
					1、由于所赠送积分无法退还，所以该系列商品不适用
					《消费者权兰保护法第25条规定的“七天无理由退货“<br/>
					2、”赠送积分”的系列商品如在7天内出现商品质量问题您可以申请换货，
					但因换货产生的往返运费由您承担，请您仔细阅读以上规则，
					在点击”同意”后即视为您已知悉以上规则并且无任何异议，
					如您不能接变，可点击”拒绝”，非常感谢您对本平台的支持和理解!</view>
				<view class="boxsContent flex justify-between">
					<view class="flex-1 bg-red1 color-w font-28 b-r-10 font-b line-h-60 text-center" @click="refuse">拒绝</view>
					<view class="flex-1 bg-red1 color-w font-28 b-r-10 font-b line-h-60 text-center m-l-30" @click="agreement">同意</view>
				</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		orderDetail,
		orderCancel,
		orderFinish,
		applyOrder
	} from '@/common/api/order.js'
	import {
		orderStatusList,
		payMethodList
	} from '@/common/api/dict.js'
	import logistics from '@/pages/order/components/logistics.vue'
	export default {
		components: {
			logistics
		},
		data() {
			return {
				background: {
					backgroundColor: '#E60000',
				},
				showReceive: false,
				showCancelModal: false,
				show: false,
				orderDetail: {},
				orderStatusList: orderStatusList,
				addressId: '',
				orderId: '',
				navBarHeight: 44,
				payMethodList: payMethodList,
				// 订单抵扣金额展示
				assetName: "",
				assetAmount: 0,
				assetMoney: 0,
				pointsMoney: 0,
				
				comfirmReceiveBool: false,//确认收货弹出窗(只针对惠民优选、积分商城)
				agree:false,
				receiveWarningBool: false,
				orderInfo: {},
				openApplyOrder:false,
				showType:false,
				rules: {
					type: {
						type: 'string',
						required: true,
						message: '请输入申请原因',
						trigger: ['change']
					},
					comment: {
						type: 'string',
						message: '请选择售后类型',
						trigger: ['blur']
					},
				},
                columns: [
                    [{
                        label: '退货退款',
                        id: 1
                    }, {
                        label: '仅退款',
                        id: 2
                    }, {
                        label: '换货',
                        id: 3
                    }]
                ],
				orderApplyInfo:{},
				form:{
					type:null,
					detailId:null,
					refundType: null,
					comment: null
				},
			};
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.getOrderDetail()
		},
		methods: {
			// 确认选择
			confirmPick(e){
				this.form.type = e.value[0].label
				this.form.refundType = e.value[0].id
				this.showType = false
			},
			// 申请售后
			toApply(data){
				this.orderApplyInfo = JSON.parse(JSON.stringify(data))
				this.form.detailId = data.detailId
				this.openApplyOrder = true
			},
			// 申请提交
			tipsClick(){
				let that = this
				that.$refs.uForm.validate().then(res => {
					if(res){
						applyOrder(that.form).then(res => {
							if(res.code == 200){
								that.form = {
									type:null,
									detailId:null,
									refundType: null,
									comment: null
								}
								this.openApplyOrder = false
								that.getOrderDetail()
							}
						})
					}
				})
			},
			copyCode(e) {
				let that = this
				uni.setClipboardData({
					data: e,
					success: function() {
						that.$msg('复制成功')
					}
				})
			},
			// 收货
			handleReceive() {
				this.confirmReceive(true)
			},
			//确认取消订单
			closeCancel() {
				this.showCancelModal = false
			},
			// 订单取消
			handleCancel() {
				this.showCancelModal = true
			},
			// 取消订单
			confirmCancel() {
				orderCancel(this.orderDetail.orderId).then(res => {
					if(res.code == 200) {
						this.$msg('取消成功')
						this.showCancelModal = false
						this.getOrderDetail()
					} else {
						this.$msg(res.msg)
					}
				})
			},
			// 订单详情
			getOrderDetail() {
				orderDetail(this.orderId).then(res => {
					this.orderDetail = res.data || {};
					// if( this.orderDetail && this.orderDetail.orderPayAssets && this.orderDetail.orderPayAssets.length > 0){
					// 	// secondType = 1 资产抵扣   --------->   secondType = 2 积分抵扣
					// 	let assetsArr = this.orderDetail.orderPayAssets.filter(item => item.secondType == 1)
					// 	let pointsArr = this.orderDetail.orderPayAssets.filter(item => item.secondType == 2)
					// 	// 如果有资产抵扣
					// 	if(assetsArr.length){
					// 		this.assetName = assetsArr[0].assetsName //抵扣资产名
					// 		this.assetAmount = assetsArr[0].assetsAmount//抵扣资产个数
					// 		this.assetMoney = this.orderDetail.secondAmount//抵扣金额
					// 	}
					// 	//积分抵扣
					// 	if(pointsArr.length){
					// 		this.pointsMoney = this.orderDetail.secondAmount//抵扣金额
					// 	}
					// }
				})
			},
			toPay() {
				// if( this.orderDetail && this.orderDetail.orderPayAssets && this.orderDetail.orderPayAssets.length > 0){
				// 	// secondType = 1 资产抵扣   --------->   secondType = 2 积分抵扣
				// 	let assetsArr = this.orderDetail.orderPayAssets.filter(item => item.secondType == 1)
				// 	let pointsArr = this.orderDetail.orderPayAssets.filter(item => item.secondType == 2)
				// 	// 如果有资产抵扣 或者有 积分抵扣
				// 	if(assetsArr.length || pointsArr.length){
				// 		let totalNum = Number(this.orderDetail.payAmount - this.orderDetail.secondAmount).toFixed(2)
				// 		if(totalNum <= 0){
				// 			totalNum = '0.00'
				// 		}
				// 		uni.setStorageSync('totalNum', totalNum)
				// 		//如果支付金额为0
				// 		if(totalNum == '0.00'){
				// 			setTimeout(() => {
				// 				uni.$emit('allAssetsPay', true)
				// 			}, 500)
				// 		}
				// 	}
				// }
				uni.navigateTo({
					url: '/pages/order/payOrder?orderId='+ this.orderId + '&areaId=' + this.orderDetail.productArea+'&productId='+this.orderDetail.productId+ '&moneyTotal=' + this.orderDetail.payAmount
				})
			},
			confirmReceive(bool) {
				let bools = bool ? true : false;
				orderFinish(this.orderId,bools).then(res => {
					if(res.code == 200) {
						console.log(res,'====adfasdfasdfa')
						this.$msg('收货成功')
						this.showReceive = false
						// this.agree = false
						// this.comfirmReceiveBool = false
						this.getOrderDetail()
						uni.$emit('loadFreshData',true)
					}
					this.$msg(res.msg)
				})
			},
			copy() {
				let that = this
				uni.setClipboardData({
				  data: this.orderDetail.orderId,
				  success: function() {
					  that.$msg('复制成功')
				  },
				  fail: function() {
					  that.$msg('复制失败')
				  }
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
.boxName{
	max-width: 180px;
}
.copy-icon {
	width: 27rpx;
	height: 26rpx;
	margin-left: 20rpx;
}
.top-bg {
	width: 100%;
	height: 330rpx;
	position: fixed;
	top: calc(var(--status-bar-height) + 88rpx);
	left: 0;
	right: 0;
	background: linear-gradient(to top, #f1eadf, #ECA52B);
}
.footer-h {
	height: 180rpx;
}
.status {
	top: 0;
	right: 0;
	border-radius: 0 10rpx;
}
.line {
	width: 100%;
	height: 2rpx;
	background: #e5e4e4;
	margin-top: 30rpx;
}
.goods-img {
	width: 140rpx;
	height: 140rpx;
	border-radius: 10rpx;
}
.address {
	width: 33rpx;
	height: 39rpx;
}
.add-address {
	width: 610rpx;
	height: 66rpx;
	background: #ECA52B;
	border-radius: 33rpx;
	font-size: 13px;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.redBox{
	border: 2rpx solid red !important;
	color: red !important;
}
.greenBox{
	border: 2rpx solid #03c627 !important;
	color: #03c627 !important;
}
.applyBtn{
	display: inline-block;
	padding: 2rpx 6rpx;
	border-radius: 10rpx;
	border: 2rpx solid #ECA52B;
	color: #ECA52B;
}
.btn {
	width: 222rpx;
	height: 76rpx;
	margin-left: 20rpx;
	border-radius: 10rpx;
	border: 2rpx solid #ECA52B;
	background: #ECA52B;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.footer {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffffff;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.boxsContent{
	margin: 60rpx auto;
}
.boxsUser{
	text-decoration: underline;
	color: rgb(38,118,229);
}
::v-deep .uni-checkbox-input{
	font-size: 18px;
	width: 18px !important;
	height: 18px !important;
	border-radius: 18px !important;
	color: red !important;
}
.copy-btn {
	color: #ECA52B;
	border: 2rpx solid #ECA52B;
	font-size: 20rpx;
	padding: 2rpx 10rpx;
	margin-left: 20rpx;
	border-radius: 6rpx;
}
.upgrade-box{
	width: 600rpx;
	height: 45vh;
	padding: 40rpx;
	border-radius: 10rpx;
}
.btnBoxx{
	padding: 0 40rpx;
	font-size: 24rpx;
	height: 70rpx;
	margin: 30rpx 0 0 20rpx;
	border-radius: 10rpx;
	border: 2rpx solid #ECA52B;
	background: #ECA52B;
	color: #ffffff;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
